<ng-container *ngIf="!isCarousel">
  <Flex *ngFor="let item of gridData; let i = index;"
        [justify]="'center'"
        [align]="'stretch'"
  >
    <FlexItem TouchFeedbackDirective
              *ngFor="let subItem of item; let j = index;"
              [ngClass]="itemCls"
              [ngStyle]="itemStyle"
              [className]="['am-grid-item-active']"
              [activeStyle]="activeStyle"
    >
      <div *ngIf="subItem !== null"
           class="{{defaultProps.prefixCls}}-item-content"
           (click)="click(subItem,i * columnNum + j)"
      >
        <div class="{{defaultProps.prefixCls}}-item-inner-content column-num-{{columnNum}}">
          <img *ngIf="subItem.icon && getContentType(subItem.icon) === 'url'"
               src="{{subItem.icon}}"
               class="{{defaultProps.prefixCls}}-icon"
          >
          <Icon *ngIf="subItem.icon && getContentType(subItem.icon)==='icon'"
                [type]="subItem.icon"
                [size]="subItem.size"
          ></Icon>
          <div *ngIf="subItem.icon && getContentType(subItem.icon)==='innerHTML'" [innerHTML]="subItem.icon | safeHTML"></div>
          <ng-template *ngIf="subItem.icon && getContentType(subItem.icon)==='TemplateRef'" [ngTemplateOutlet]="subItem.icon"></ng-template>
          <div class="{{defaultProps.prefixCls}}-text">{{subItem.text}}</div>
        </div>
      </div>
      <div *ngIf="subItem === null" class="{{defaultProps.prefixCls}}-null-item"></div>
    </FlexItem>
  </Flex>
  <ng-content></ng-content>
</ng-container>

<Carousel *ngIf="isCarousel && carouselDataTmp.length > 0"
          [autoplay]="false"
          [infinite]="true"
          [selectedIndex]="0"
          [autoplayInterval]='3000'
          [dots]="carouselProps.dots"
          [dragging]="carouselProps.dragging"
>
  <CarouselSlide *ngFor="let gridData of carouselDataTmp"
                 class="{{defaultProps.prefixCls}}-carousel-page"
                 style="display: block;"
  >
    <Flex *ngFor="let item of gridData; let i = index;"
          [justify]="'center'"
          [align]="'stretch'"
    >
      <FlexItem TouchFeedbackDirective
                *ngFor="let subItem of item; let j = index;"
                class="{{defaultProps.prefixCls}}-item"
                [ngStyle]="itemStyle"
                [className]="['am-grid-item-active']"
      >
        <div *ngIf="subItem !== null"
             class="{{defaultProps.prefixCls}}-item-content"
             (click)="click(subItem,i * columnNum + j)"
        >
          <div class="{{defaultProps.prefixCls}}-item-inner-content column-num-4">
            <img class="{{defaultProps.prefixCls}}-icon" src="{{subItem.icon}}">
            <div class="{{defaultProps.prefixCls}}-text">{{subItem.text}}</div>
          </div>
        </div>
        <div *ngIf="subItem === null" class="{{defaultProps.prefixCls}}-null-item"></div>
      </FlexItem>
    </Flex>
  </CarouselSlide>
</Carousel>